<template>
  <!--头部导航-->
  <header>
    <div class="learingHeader">
      <nav class="navbar">
        <div class="">
          <div class="logo"><img src="/static/img/asset-logoIco.png" width="195" height="42" alt=""></div>
          <div class="nav-list">
            <ul class="nav navbar-nav">
              <li ><a href="/">首页</a></li>
              <li><nuxt-link  class="title-link" to="/course/search">视频</nuxt-link></li>
              <li><a href="#">博文</a></li>
              <li></li>
            </ul>
          </div>

          <div class="sign-in">
            <span v-if="logined == true">欢迎{{this.user.username}}</span>
            <a href="javascript:;" @click="logout" v-if="logined == true">退出</a>
            <a href="javascript:;" @click="showlogin" v-if="logined == false">登陆&nbsp;|&nbsp;注册</a>
            <el-dialog title="登陆|注册" :visible.sync="LoginFormVisible">
              <login-form></login-form>
            </el-dialog>
            <a href="http://admin.itxxw.net/" class="personal" target="_blank">系统管理</a>
          </div>
          <div class="starch">
            <div><input type="text" class="input-search" v-model="keyword" @keyup.enter="search"  placeholder="输入查询关键词"></div>
            <div class="searchword"><a @click="search">搜索</a> </div>
          </div>
        </div>
      </nav>
    </div>
  </header>
</template>
<script>
  import utilApi from '~/api/utils'
  import * as sysApi from '~/api/system'
  import loginForm from '~/components/loginForm.vue'

  export default {
    components:{
      loginForm
    },
    head: {
      link: [
        { rel: 'stylesheet', href: '/static/normalize-css/normalize.css"' },
        { rel: 'stylesheet', href: '/static/bootstrap/dist/css/bootstrap.css' },
        { rel: 'stylesheet', href: '/static/css/page-learing-index.css' },
        { rel: 'stylesheet', href: '/static/css/page-header.css' },
      ]
    },
    data() {
      return {
        keyword: '',
        logined:false,
        LoginFormVisible:false,
        user:{
          userid:'',
          username: '',
          userpic: ''
        },
      }
    },
    methods:{
      search() {
        if (this.keyword === '') {
          this.$router.push(`/course/search`)
        } else {
          let keyword = encodeURIComponent(this.keyword)
          this.$router.push(`/course/search?keyword=`+keyword)
        }
      },
//退出登录
      logout: function () {
        this.$confirm('确认退出吗?', '提示', {
        }).then(() => {
          //跳转到统一登陆
          window.location = "http://admin.itxxw.net/#/logout"
        }).catch(() => {

        });
      },


/*      refresh_user:function(){
        let activeUser= utilApi.checkActiveUser();

        if(activeUser){
          this.logined = true
          this.user = activeUser;
          //console.log(this.user.username)
        }else{
          //this.showlogin()
        }
      },*/


      refresh_user:function(){
        //从sessionStorage中取出当前用户
        let activeUser= utilApi.getActiveUser();
        //取出cookie中的令牌
        let uid = utilApi.getCookie("uid")
        console.log("从sessionStorage中取出当前用户");
        //console.log(activeUser.toString())
        if(activeUser && uid && uid == activeUser.uid){
          this.logined = true
          this.user = activeUser;
          console.log("this.user = activeUser")
        }else{
          if(!uid){
            return ;
          }
          //请求查询jwt
          sysApi.getjwt().then((res) => {
            console.log("getjwt().then((res)")
            console.log(res)
            if(res.success){
              let jwt = res.jwt;
              let activeUser = utilApi.getUserInfoFromJwt(jwt)
              console.log("getUserInfoFromJwt(jwt)")
              if(activeUser){
                this.logined = true
                this.user = activeUser;
                utilApi.setUserSession("activeUser",JSON.stringify(activeUser))
                console.log("取当前激活用户"+activeUser)
              }
            }
          })
        }
      },




      showlogin:function(){
        this.returnUrl = window.location;
        this.LoginFormVisible = true;
      }
    },
    mounted() {
      this.refresh_user()

    }
  }
</script>
<style lang="postcss">

</style>
